<template>
  <div class="canvas-image">
    <h2>原图列表</h2>
    <div class="img-list">
      <img v-for="(item, index) in imgList" :key="index" :src="item.url" alt="网图" />
    </div>
    <h2>canvas图片列表</h2>
    <div class="img-list">
      <img v-for="(item, index) in canvasImgList" :key="index" :src="item" alt="网图2" />
    </div>
  </div>
</template>
<script setup lang="ts">
import { nextTick, ref } from "vue";
import testImg from "@/assets/images/test.jpg";
import testImg1 from "@/assets/images/test1.png";
import testImg2 from "@/assets/images/test2.png";
import { dealImage, ImgsInfoType } from "../helper";

const imgList = ref<ImgsInfoType[]>([]);
imgList.value = [
  { url: testImg, width: 400, height: 400 },
  { url: testImg1, width: 1200, height: 1600 },
  { url: testImg2, width: 1600, height: 1200 },
].map(({ url, width, height }) => {
  return {
    url,
    drawInfo: new Array(2 + Math.floor(Math.random() * 9)).fill(null).map(() => {
      const x1 = Math.floor(Math.random() * width);
      const y1 = Math.floor(Math.random() * height);
      const x2 = x1 + Math.floor(Math.random() * (width - x1));
      const y2 = y1 + Math.floor(Math.random() * (height - y1));
      return [x1, y1, x2, y2];
    }),
  };
});
const canvasImgList = ref<string[]>([]);
nextTick(() => {
  dealImage(imgList.value).then((res) => {
    canvasImgList.value = res;
  });
});
</script>
<style lang="scss" scoped>
.canvas-image {
  .my-canvas {
    // width: 100vw;
    // height: 100vh;
    border: 1px solid black;
  }

  .img-list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
  }
}
</style>
